<template>
  <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
  <div class="apply-scholarship-form">
    <h1>申请助学金</h1>
    <el-form :model="form" ref="formRef" label-width="120px">
      <el-form-item>
        <img :src="form.avatar" class="avatar">
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="form.student_id" disabled></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.student_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="院系">
        <el-input v-model="form.department" disabled></el-input>
      </el-form-item>
      <el-form-item label="专业" required>
        <el-input v-model="form.major"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" required>
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="年级" required>
        <el-select v-model="form.grade" placeholder="请选择年级">
          <el-option label="大一" value="大一"></el-option>
          <el-option label="大二" value="大二"></el-option>
          <el-option label="大三" value="大三"></el-option>
          <el-option label="大四" value="大四"></el-option>
          <el-option label="大五" value="大五"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家庭年收入" required>
        <el-input v-model="form.family_income" type="number" min="0" placeholder="请输入家庭年收入">
          <template #append>元/年</template>
        </el-input>
      </el-form-item>
      <el-form-item label="学生类型" required>
        <el-select v-model="form.student_type" placeholder="请选择学生类型" @change="handleStudentTypeChange">
          <el-option label="普通学生" value="普通学生"></el-option>
          <el-option label="退役士兵" value="退役士兵"></el-option>
          <el-option label="公费师范生" value="公费师范生"></el-option>
          <el-option label="优师计划" value="优师计划"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="助学金等级" required>
        <el-select v-model="form.bursary_level" placeholder="请选择助学金类别" :disabled="isScholarshipDisabled">
          <el-option label="一档助学金(4500元，特困生)" value="一档助学金"></el-option>
          <el-option label="二档助学金(3000元，困难生)" value="二档助学金"></el-option>
          <el-option label="三档助学金(2000元，一般困难生)" value="三档助学金"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请理由" required>
        <el-input type="textarea" v-model="form.reason"></el-input>
        <div class="application-reason-tip">
          请详细说明家庭经济困难原因（如家庭成员患病、失业、自然灾害等），不少于200字。
        </div>
      </el-form-item>
      <el-form-item label="证明材料上传" required>
        <el-upload class="upload-demo" drag action="http://127.0.0.1:3030/apply/uploadFile"
          :on-success="handleUploadSuccess" :before-upload="beforeUpload" :file-list="fileList" accept=".pdf,image/*"
          :limit="3" :on-exceed="handleExceed">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">支持 PDF / 图片格式，大小不超过 5MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-alert title="请填写所有必填项后再提交申请" type="info" show-icon></el-alert>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyForBursary">提交申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserInfoStore } from '@/store/userInfo.js';
import breadCrumb from '@/components/BreadCrumb.vue';
import { fileBindAccount, applyBursary } from '@/api/apply.js';
import { useRouter } from 'vue-router';

const router = useRouter();
//用户信息
const userStore = useUserInfoStore();
//面包屑
const breadcrumb = ref()
const item = ref({
  first: '流程管理',
  second: '助学金申请',
})
// 表单数据
const formRef = ref(null);
const form = ref({
  student_id: userStore.account,
  student_name: userStore.name,
  department: userStore.department,
  major: '',
  grade: '',
  mobile:'',
  family_income: '',
  reason: '',
  bursary_level: '',
  avatar: userStore.imageUrl,
  student_type: ''
});
// 是否禁用助学金等级选择
const isScholarshipDisabled = ref(false);
const handleStudentTypeChange = (value) => {
  if (value === '公费师范生' || value === '优师计划') {
    isScholarshipDisabled.value = true;
    form.value.bursary_level = '';
    ElMessage({
      message: '公费师范生和优师计划不可同时享受助学金',
      type: 'warning',
    });
  } else {
    isScholarshipDisabled.value = false;
  }
};

const fileList = ref([]);
// 文件上传成功回调
const onlyIdArray = ref([]);
const handleUploadSuccess = async (response, file, fileList) => {
  onlyIdArray.value.push(response.onlyId);
  if (res.data.status === 0) {
    ElMessage.success(`${file.name} 上传成功`);
  } else {
    ElMessage.error(`${file.name} 上传失败`);
  }
};
// 上传文件之前的钩子
const beforeUpload = (file) => {
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    ElMessage.error('上传文件大小不能超过 5MB!');
  }
  return isLt5M;
};
// 文件超出个数限制时的钩子
const handleExceed = (files, fileList) => {
  ElMessage.warning('最多上传 3 个文件');
};
// 提交申请
const applyForBursary = async () => {
  const res = await applyBursary(form.value)
  await fileBindAccount(res.data.applicationId, onlyIdArray.value)
  console.log(res.data.applicationId)
  if (res.data.status === 0) {
    ElMessage.success('申请成功');
    router.push('/application')
  } else {
    ElMessage.error(res.data.message);
  }
  // 清空表单数据
  form.value = {
    student_id: userStore.account,
    student_name: userStore.name,
    department: userStore.department,
    major: '',
    grade: '',
    mobile: '',
    family_income: '',
    reason: '',
    bursary_level: '',
    avatar: userStore.imageUrl,
    student_type: ''
  };
  fileList.value = [];
};
</script>

<style scoped>
.apply-scholarship-form {
  padding: 8px;
  height: calc(100vh - 101px);
  margin: 0 auto;
  background-color: #f5f5f5;
}

.apply-scholarship-form h1 {
  margin-bottom: 20px;
}

.el-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  /* 调整表单最大宽度 */
  margin: 0 auto;
}

.el-form-item .el-input {
  width: 50%;
}

.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.application-reason-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.upload-demo {
  width: 100%;
  margin-bottom: 20px;
}

.right-aligned-button {
  display: flex;
  justify-content: flex-end;
}

:deep(.right-aligned-button .el-form-item) {
  display: flex;
  justify-content: flex-end;
}
</style>
